<template>
	<div class="left-bar">
		<div class="bar-item" v-for="c in components" :key="c.id">
			<el-popover
				ref="popover"
				placement="right"
				:width="200"
				trigger="click"
			>
				<div class="item-box">
					<div class="item-children">
						<div
							class="children"
							v-for="cc in c.children"
							:key="cc.id"
						>
							<div>{{ cc.label }}</div>
						</div>
					</div>
				</div>
				<template #reference>
					<div class="item-btn">
						<div class="item-icon">
							<i :class="c.icon"></i>
							<!-- <el-icon><data-analysis /></el-icon> -->
						</div>
						<div class="item-title">{{ c.label }}</div>
					</div>
				</template>
			</el-popover>
		</div>
	</div>
</template>

<script lang="ts">
import {
	defineComponent,
	reactive,
	toRefs,
	ref,
	unref,
	onMounted,
	onUnmounted,
} from "vue";
import { components } from "../components/components";

export default defineComponent({
	components: {},
	setup(props: any, context: any) {
		const options = {
			components,
		};
		const refs = {};
		// reactive 数据双向绑定
		const state: any = reactive({});
		// 方法
		const methods = {};
		// 页面加载完成
		onMounted(() => {});
		// 页面销毁完成
		onUnmounted(() => {});

		return {
			...refs,
			...options,
			// toRefs转换为响应式数据
			...toRefs(state),
			...methods,
		};
	},
});
</script>

<style lang="less" scoped>
.left-bar {
	.bar-item {
		text-align: center;
		.item-btn {
			cursor: pointer;
			.item-icon {
				font-size: 13px;
			}
			.item-title {
				line-height: 13px;
				font-size: 13px;
			}
		}
	}
}
</style>